<script setup>
import { artGetChannelsService } from '@/api/article'
import { ref, onMounted } from 'vue'
// 声明变量 存放请求过来的数据
const channelList = ref([])
// 子组件接收父组件的数据
defineProps({
  modelValue: {
    // 定义类型
    type: [Number, String]
  },
  width: {
    type: String
  }
})
// 声明我们将来提交的事件
const emit = defineEmits(['update:modelValue'])
// 声明函数 获取频道列表数据
const getChannelsService = async () => {
  const res = await artGetChannelsService()
  channelList.value = res.data.data
}

// 确保在组件挂载后获取数据
onMounted(getChannelsService)
</script>

<template>
  <!-- label 是展示给用户看的 value是 提交给后台的 -->
  <!--
        通过父传子 渲染我们点击的值
        当我们下面的选项发生变化 回触发 modelValue事件 通知父组件进行更新
  -->
  <el-select style="width: 200px;" :modelValue="modelValue" @update:modelValue="emit('update:modelValue', $event)"
    :style="{ width }">
    <el-option v-for="channel in channelList" :label="channel.cate_name" :value="channel.id" :key="channel.id">
    </el-option>
  </el-select>
</template>

<style></style>
